import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import stylesheet from '~/tailwind.css'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: stylesheet },
  {
    rel: "icon",
    href: "/favicon.png",
    type: "image/png",
  },
];

export default function App () {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className="bg-gray-100 text-slate-900">
        <div className="mx-5 mt-2 flex flex-col gap-1">
          <img src={logo} width={150} height={50} className="self-start " />
          <div className="mt-3">
            <label className="font-bold text-xl">AI Photo Generate</label>
            <div className="font-light text-md">Generate your ideal visual style</div>
          </div>

        </div>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}


const logo = ``